<template>
	<!-- 高级功能首页 -->
	<view>
		<view class="status" :style="{height:`${statusHeight}px`}"></view>
		<view :style="{height:`${statusHeight}px`}" style="background-color: #F5F5F5;"></view>
		<view class="navImg">
			<image class="headImg" :src="userData.headPortrait"></image>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="bottomShell">
			<view class="title">请选择您的操作</view>
			<view class="iconShell" @click="fetchClick">
				<image class="icon" src="/static/image/takeIcon.png"></image>
				<view class="iconTextShell">
					<view class="iconBigText">取货</view>
					<view class="iconSmallText">取出客户存在柜子中的酒</view>
				</view>
			</view>
			<view class="iconShell" @click="authenticateUrl">
				<image class="icon" src="/static/image/deteIcon.png"></image>
				<view class="iconTextShell">
					<view class="iconBigText">网络初鉴</view>
					<view class="iconSmallText">在线检测用户提交的图片</view>
				</view>
			</view>
		</view>
		<TabBar current="3" />
	</view>
</template>

<script>
	import TabBar from "@/components/tabBar.vue"
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				statusHeight: 0, //状态栏
				userData: {
					headPortrait: '../../static/logo.png'
				}
			}
		},
		onReady() {
			this.statusHeight = getApp().globalData.statusBarHeight
		},
		onLoad() {
			this.userData = uni.getStorageSync('userData').user
		},
		methods: {
			fetchClick() {
				uni.showToast({
					title:'该功能暂未开放',
					duration:2000,
					icon:'none'
				})
			},
			authenticateUrl() {
				uni.navigateTo({
					url: "/pages/highOrder/authenList/authenList"
				})
			}
		}
	}
</script>

<style scoped>
	.status {
		width: 100%;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 99999;
	}

	.navImg {
		width: 100%;
		box-sizing: border-box;
		padding: 30rpx 40rpx;
		background-color: #FFFFFF;
		position: fixed;
		z-index: 999;
	}

	.headImg {
		width: 56rpx;
		height: 56rpx;
		display: block;
		border-radius: 50%;
	}

	.bottomShell {
		width: 100%;
		box-sizing: border-box;
		padding: 50rpx 40rpx;
	}

	.title {
		width: 100%;
		font-size: 40rpx;
		font-family: Source Han Sans CN;
		font-weight: 550;
		color: #000000;
	}

	.iconShell {
		width: 100%;
		box-sizing: border-box;
		padding: 60rpx 40rpx;
		border-radius: 16rpx;
		background-color: #F1F1F1;
		display: flex;
		align-items: center;
		margin-top: 34rpx;
	}

	.icon {
		width: 126rpx;
		height: 126rpx;
		display: block;
	}

	.iconTextShell {
		display: flex;
		flex-direction: column;
		height: 115rpx;
		justify-content: space-between;
		margin-left: 60rpx;
	}

	.iconBigText {
		font-size: 34rpx;
		font-family: Source Han Sans CN;
		font-weight: 550;
		color: #000000;
	}

	.iconSmallText {
		font-size: 28rpx;
		font-family: Source Han Sans CN;
		font-weight: 400;
		color: #000000;
	}
</style>
